<template>
  <div class="test-user-dialog">
    <el-dialog
      :title="type === '1'?'添加':'编辑'"
      :visible.sync="dialogVisible"
      @close="closeDialog">
      <el-form ref="form" :model="paramForm" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="paramForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="paramForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="paramForm.sex" label="0">男</el-radio>
          <el-radio v-model="paramForm.sex" label="1">女</el-radio>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="paramForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-cascader class="myCascader" :options="options" v-model="optionValue" clearable></el-cascader>
          <el-input class="myTextarea" v-model="paramForm.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {postRequest} from '../../util/http'
export default {
  name: 'TestUserDialog',
  data () {
    return {
      dialogVisible: true,
      type: this.$route.query.type,
      options: [], // 地区json
      optionValue: [],
      paramForm: {
        id: this.$route.query.id,
        name: '',
        age: '',
        sex: '0',
        mobile: '',
        address: '',
        province: '',
        city: '',
        area: ''
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    // 初始化方法
    init () {
      this.findTestCityCascader()
      // type:1添加，2编辑
      if (this.type !== '1') {
        this.view()
      }
    },
    // 关闭弹窗回调方法
    closeDialog () {
      this.$router.push({path: '/testUser/list'})
    },
    // 保存或更新
    async save () {
      if (this.optionValue != null && this.optionValue.length > 0) {
        this.paramForm.province = this.optionValue[0]
        this.paramForm.city = this.optionValue[1]
        this.paramForm.area = this.optionValue[2]
      }
      let res = await postRequest(this.type === '1' ? '/testUser/save' : '/testUser/update', this.paramForm)
      if (res.errorCode === 200 && res.data) {
        this.$message({
          message: this.type === '1' ? '添加成功' : '编辑成功',
          type: 'success'
        })
        this.dialogVisible = !this.dialogVisible
      }
    },
    // 详情
    async view () {
      let res = await postRequest('/testUser/view', {id: this.paramForm.id})
      if (res.errorCode === 200 && res.data) {
        this.paramForm = res.data
        // 回填省
        if (res.data.province != null) {
          this.optionValue[0] = res.data.province
        }
        // 回填市
        if (res.data.city != null) {
          this.optionValue[1] = res.data.city
        }
        // 回填区
        if (res.data.area != null) {
          this.optionValue[2] = res.data.area
        }
      }
    },
    // 获取地区级联数据
    async findTestCityCascader () {
      let res = await postRequest('/testCity/findTestCityCascader', {})
      this.options = res.data
    }
  }
}
</script>

<style>
.myCascader{
  float: left;
}
.myTextarea{
  float: left;
  width: 70%;
}
.el-radio{
  float: left;
  margin-top:12px;
}
</style>
